<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Batch Sender</title>
    <!-- Import Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- Import Axios for HTTP requests -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Import Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Import custom CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <h1>Email Batch Sender</h1>
            </el-header>
            
            <el-container>
                <el-aside width="200px">
                    <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @select="handleMenuSelect">
                        <el-menu-item index="1">
                            <i class="el-icon-message"></i>
                            <span slot="title">Email Addresses</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-document"></i>
                            <span slot="title">Email Templates</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-s-promotion"></i>
                            <span slot="title">Email Tasks</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                
                <el-main>
                    <!-- Email Addresses Component -->
                    <div v-if="activeComponent === '1'">
                        <email-addresses></email-addresses>
                    </div>
                    
                    <!-- Email Templates Component -->
                    <div v-if="activeComponent === '2'">
                        <email-templates></email-templates>
                    </div>
                    
                    <!-- Email Tasks Component -->
                    <div v-if="activeComponent === '3'">
                        <email-tasks></email-tasks>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- Import Vue Components -->
    <script src="js/components/email-addresses.js"></script>
    <script src="js/components/email-templates.js"></script>
    <script src="js/components/email-tasks.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
